const deps = [];
// 将给定对象包装为`Proxy`实现数据响应
function reactive(obj) {
  // ... 内部实现
  const proxy = new Proxy(obj, {
    set: (target, prop, value) => {
      target[prop] = value;
      if (prop === 'foo') {
        deps[0]();
      } else if (prop === 'bar') {
        deps[1]();
      }
    },
    get: (target, prop) => {
      return target[prop];
    },
  });
  return proxy;
}

// 添加一个数据状态监视函数
function watch(effect) {
  // ... 内部实现
  deps.push(effect);
}

const state = reactive({
  foo: 100,
  bar: 200,
});

watch(() => {
  console.log('foo changed: ', state.foo);
});

watch(() => {
  console.log('bar changed: ', state.bar);
});

state.foo++; // => foo changed: 101
state.bar++; // => bar changed: 201
